<template>
	<view class="layout">
		<wd-navbar title="作业卡" left-text="返回" @click-left="uni.navigateBack" left-arrow  />
		<wd-toast />
		<wd-cell-group title="生产说明">
			<wd-cell title="批次号" :value="app.processCardDetail?.batchNumber || ''" />
			<wd-cell title="生产工艺" :value="app.processCardDetail?.productionSpecName || ''" />
			<wd-cell title="原膜规格" :value="app.processCardDetail?.filmSupplierSpec || ''" />
			<wd-cell title="说明" :value="app.processCardDetail?.description || ''" />
			<wd-cell title="创建时间" :value="app.processCardDetail?.createDate ? dayjs(app.processCardDetail.createDate).format('YYYY-MM-DD HH:mm:ss') : ''" />
		</wd-cell-group>
		<wd-cell-group title="工序">
			<wd-cell 
				v-for="(process, index) in processList" 
				:key="process.processId"
				:title="process.processName" 
				:is-link="true"
				:to="getProcessRoute(process, index + 1)"
			/>
			<!-- 空状态提示 -->
			<view v-if="processList.length === 0" class="empty-state">
				<text class="empty-text">暂无工序数据</text>
			</view>
		</wd-cell-group>
	</view>
</template>
<script lang="ts" setup>
	import useApp from '@/stores/app';
	import dayjs from 'dayjs';
	import { onShow } from '@dcloudio/uni-app'
	import { useToast } from '@/uni_modules/wot-design-uni'
	import { ProcessService, type ProcessItem, type ProcessStepRecord, type ProcessStepException } from '@/services'
	import { ref } from 'vue'
	
	const app = useApp();
	const toast = useToast()
	const processList = ref<ProcessItem[]>([]);
	
	// 根据工序名称和索引生成路由
	const getProcessRoute = (process: ProcessItem, stepNumber: number) => {
		// 根据工序名称映射到对应的页面路由
		const routeMap: Record<string, string> = {
			'离层涂布': '/pages/step_1/step_1',
			'色层涂布': '/pages/step_2/step_2',
			'模压': '/pages/step_3/step_3',
			'镀铝加工': '/pages/step_4/step_4',
			'胶层加工': '/pages/step_5/step_5',
			'分切复卷': '/pages/step_6/list',
		};
		
		// 优先使用工序名称映射，否则使用步骤编号
		return routeMap[process.processName] || `/pages/step_${stepNumber}/step_${stepNumber}`;
	}
	
	// 定义正确的工序顺序
	const processOrder = [
		'离层涂布',
		'色层涂布', 
		'模压',
		'镀铝加工',
		'胶层加工',
		'分切复卷'
	];
	
	// 按照预定义顺序排序工序列表
	const sortProcessList = (processes: ProcessItem[]) => {
		return processes.sort((a, b) => {
			const indexA = processOrder.indexOf(a.processName);
			const indexB = processOrder.indexOf(b.processName);
			
			// 如果都在预定义顺序中，按顺序排列
			if (indexA !== -1 && indexB !== -1) {
				return indexA - indexB;
			}
			
			// 如果只有一个在预定义顺序中，优先显示在顺序中的
			if (indexA !== -1) return -1;
			if (indexB !== -1) return 1;
			
			// 如果都不在预定义顺序中，按原顺序
			return 0;
		});
	}
	

	// 加载工序列表
	const loadProcessList = async () => {
		try {
			const result = await ProcessService.getProcessList(1, 10);
			if (result.code === 200) {
				const validProcesses = result.rows.filter(item => item.dataStatus === 1);
				processList.value = sortProcessList(validProcesses); // 排序后显示
			} else {
				console.error('工序列表接口返回错误:', result.msg);
				processList.value = []; // 接口返回错误时显示空列表
			}
		} catch (error) {
			console.error('加载工序列表失败:', error);
			processList.value = []; // 接口调用失败时显示空列表
		}
	}
	


	onShow(async () => {
		toast.loading('加载中...')
		try {
			// 并行加载作业数据和工序列表
			await Promise.all([
				app.loadWork(),
				loadProcessList()
			]);
			
			// 调试信息：检查流程卡详情
			console.log('当前流程卡详情:', app.processCardDetail);
		} catch (error) {
			toast.error("网络出现异常!")
		} finally {
			toast.close();
		}
	});
</script>
<style scoped>
	.layout {
		padding: 16rpx;
	}
	
	.empty-state {
		text-align: center;
		padding: 40rpx 20rpx;
	}
	
	.empty-text {
		color: #999;
		font-size: 28rpx;
	}
</style>